import { Metadata } from 'next';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Calendar,
  Clock,
  MapPin,
  Users,
  Video,
  BookOpen,
  Award,
  Globe,
  ArrowRight,
  ExternalLink,
  Play,
  Download,
  Star,
  CheckCircle,
  Zap,
  Target,
  GraduationCap,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '活动与培训 | CActor框架社区',
  description:
    '参加CActor技术会议、在线培训和认证课程，提升您的Actor模型开发技能。',
};

/**
 * 即将举行的活动
 */
const upcomingEvents = [
  {
    id: 1,
    title: 'CActor 2024 全球开发者大会',
    type: 'conference',
    date: '2024-03-15',
    time: '09:00 - 18:00',
    location: '北京国际会议中心',
    format: 'hybrid', // online, offline, hybrid
    attendees: 500,
    price: 'free',
    description:
      '汇聚全球CActor开发者，分享最新技术进展、最佳实践和未来发展方向。',
    highlights: [
      'CActor 3.0 新特性发布',
      '金融行业应用案例分享',
      '性能优化最佳实践',
      '开源社区发展规划',
    ],
    speakers: [
      { name: 'Alex Chen', title: 'CActor创始人', avatar: '👨‍💻' },
      { name: 'Sarah Kim', title: '高级架构师', avatar: '👩‍💻' },
      { name: 'Mike Johnson', title: '性能专家', avatar: '👨‍🔬' },
    ],
    status: 'open', // open, full, closed
    featured: true,
  },
  {
    id: 2,
    title: 'Actor模型在微服务架构中的应用',
    type: 'webinar',
    date: '2024-02-20',
    time: '14:00 - 16:00',
    location: '在线直播',
    format: 'online',
    attendees: 200,
    price: 'free',
    description: '深入探讨Actor模型在微服务架构设计中的应用模式和最佳实践。',
    highlights: [
      '微服务通信模式',
      '状态管理策略',
      '容错和恢复机制',
      '实战案例分析',
    ],
    speakers: [{ name: 'Lisa Wang', title: '微服务专家', avatar: '👩‍🚀' }],
    status: 'open',
    featured: false,
  },
  {
    id: 3,
    title: 'CActor性能调优实战工作坊',
    type: 'workshop',
    date: '2024-02-25',
    time: '09:00 - 17:00',
    location: '上海张江高科技园区',
    format: 'offline',
    attendees: 50,
    price: '¥299',
    description: '动手实践CActor框架的性能调优技巧，从理论到实战全面提升。',
    highlights: [
      '性能分析工具使用',
      '内存优化技巧',
      '并发调优策略',
      '实际项目优化案例',
    ],
    speakers: [{ name: 'David Lee', title: '性能工程师', avatar: '👨‍💼' }],
    status: 'open',
    featured: true,
  },
];

/**
 * 历史活动
 */
const pastEvents = [
  {
    id: 4,
    title: 'CActor入门到精通系列讲座',
    date: '2024-01-15',
    attendees: 800,
    rating: 4.8,
    recording: true,
    materials: true,
  },
  {
    id: 5,
    title: '金融科技中的Actor模型应用',
    date: '2023-12-20',
    attendees: 350,
    rating: 4.9,
    recording: true,
    materials: true,
  },
  {
    id: 6,
    title: 'CActor 2.0 发布会',
    date: '2023-11-10',
    attendees: 1200,
    rating: 4.7,
    recording: true,
    materials: true,
  },
];

/**
 * 在线培训课程
 */
const trainingCourses = [
  {
    id: 1,
    title: 'CActor框架基础入门',
    level: 'beginner',
    duration: '8小时',
    modules: 12,
    price: 'free',
    rating: 4.8,
    students: 2500,
    description: '从零开始学习CActor框架，掌握Actor模型的核心概念和基本用法。',
    topics: [
      'Actor模型基础概念',
      'CActor框架安装配置',
      '第一个Actor应用',
      '消息传递机制',
      'Actor生命周期管理',
      '错误处理和监督',
    ],
    instructor: {
      name: 'Mike Johnson',
      title: '资深讲师',
      avatar: '👨‍🏫',
      experience: '10年+',
    },
    certificate: true,
    featured: true,
  },
  {
    id: 2,
    title: 'CActor高级开发实战',
    level: 'advanced',
    duration: '16小时',
    modules: 20,
    price: '¥599',
    rating: 4.9,
    students: 800,
    description: '深入学习CActor框架的高级特性，掌握复杂分布式系统的开发技巧。',
    topics: [
      '分布式Actor系统设计',
      '集群管理和负载均衡',
      '持久化和事件溯源',
      '性能监控和调优',
      '容错和恢复策略',
      '企业级应用架构',
    ],
    instructor: {
      name: 'Alex Chen',
      title: '技术专家',
      avatar: '👨‍💻',
      experience: '15年+',
    },
    certificate: true,
    featured: true,
  },
  {
    id: 3,
    title: '金融系统CActor应用专题',
    level: 'intermediate',
    duration: '12小时',
    modules: 16,
    price: '¥399',
    rating: 4.7,
    students: 450,
    description: '专门针对金融行业的CActor应用开发，包含真实案例和最佳实践。',
    topics: [
      '金融系统架构设计',
      '高频交易系统开发',
      '支付系统实现',
      '风控系统集成',
      '合规性要求处理',
      '性能优化策略',
    ],
    instructor: {
      name: 'Sarah Kim',
      title: '金融科技专家',
      avatar: '👩‍💻',
      experience: '12年+',
    },
    certificate: true,
    featured: false,
  },
];

/**
 * 认证体系
 */
const certifications = [
  {
    id: 1,
    name: 'CActor认证开发者',
    level: 'Associate',
    description: '证明具备CActor框架基础开发能力',
    requirements: [
      '完成基础入门课程',
      '通过在线考试（70分以上）',
      '提交一个实践项目',
    ],
    benefits: ['官方认证证书', '技能徽章', '社区专属权限', '就业推荐机会'],
    price: '¥199',
    duration: '证书有效期2年',
    holders: 1200,
  },
  {
    id: 2,
    name: 'CActor认证专家',
    level: 'Professional',
    description: '证明具备CActor框架高级开发和架构设计能力',
    requirements: [
      '持有认证开发者证书',
      '完成高级开发实战课程',
      '通过专家级考试（80分以上）',
      '提交复杂系统架构设计',
    ],
    benefits: [
      '专家级认证证书',
      '金色技能徽章',
      '技术顾问机会',
      '优先技术支持',
      '年度专家聚会邀请',
    ],
    price: '¥599',
    duration: '证书有效期3年',
    holders: 280,
  },
  {
    id: 3,
    name: 'CActor认证架构师',
    level: 'Expert',
    description: '证明具备企业级CActor系统架构设计和团队领导能力',
    requirements: [
      '持有认证专家证书',
      '3年以上CActor项目经验',
      '通过架构师级面试',
      '提交企业级项目案例',
    ],
    benefits: [
      '架构师认证证书',
      '钻石级技能徽章',
      '技术咨询合作机会',
      '产品路线图参与权',
      '全球架构师峰会邀请',
    ],
    price: '¥1299',
    duration: '证书终身有效',
    holders: 45,
  },
];

export default function EventsPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-green-50">
      {/* Hero Section */}
      <section className="py-16 px-4 bg-white border-b">
        <div className="max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-green-100 text-green-700 text-sm font-medium mb-6">
            <Calendar className="w-4 h-4 mr-2" />
            活动与培训
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            提升技能，
            <span className="bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
              成就专业
            </span>
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
            参加我们的技术会议、在线培训和认证课程，与全球专家交流学习，
            掌握CActor框架的精髓，成为Actor模型开发专家。
          </p>
        </div>
      </section>

      {/* 即将举行的活动 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="flex items-center justify-between mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              即将举行的活动
            </h2>
            <Badge className="bg-green-100 text-green-700">
              <Calendar className="w-3 h-3 mr-1" />
              {upcomingEvents.length} 个活动
            </Badge>
          </div>

          <div className="space-y-8">
            {upcomingEvents.map(event => (
              <Card
                key={event.id}
                className={`hover:shadow-xl transition-all duration-300 ${
                  event.featured
                    ? 'ring-2 ring-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
                    : ''
                }`}
              >
                <CardContent className="p-8">
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {/* 活动信息 */}
                    <div className="lg:col-span-2">
                      <div className="flex items-center gap-3 mb-4">
                        <Badge
                          className={`${
                            event.type === 'conference'
                              ? 'bg-blue-100 text-blue-700'
                              : event.type === 'webinar'
                                ? 'bg-purple-100 text-purple-700'
                                : 'bg-orange-100 text-orange-700'
                          }`}
                        >
                          {event.type === 'conference'
                            ? '技术大会'
                            : event.type === 'webinar'
                              ? '在线讲座'
                              : '实战工作坊'}
                        </Badge>
                        {event.featured && (
                          <Badge className="bg-green-100 text-green-700">
                            <Star className="w-3 h-3 mr-1" />
                            精选推荐
                          </Badge>
                        )}
                        <Badge
                          variant={
                            event.price === 'free' ? 'secondary' : 'outline'
                          }
                        >
                          {event.price === 'free' ? '免费' : event.price}
                        </Badge>
                      </div>

                      <h3 className="text-2xl font-bold text-gray-900 mb-3">
                        {event.title}
                      </h3>

                      <p className="text-gray-600 mb-6">{event.description}</p>

                      {/* 活动亮点 */}
                      <div className="mb-6">
                        <h4 className="font-semibold text-gray-900 mb-3">
                          活动亮点：
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                          {event.highlights.map((highlight, index) => (
                            <div
                              key={index}
                              className="flex items-center text-sm"
                            >
                              <Zap className="w-3 h-3 text-green-500 mr-2" />
                              <span className="text-gray-600">{highlight}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* 演讲嘉宾 */}
                      <div className="mb-6">
                        <h4 className="font-semibold text-gray-900 mb-3">
                          演讲嘉宾：
                        </h4>
                        <div className="flex flex-wrap gap-4">
                          {event.speakers.map((speaker, index) => (
                            <div
                              key={index}
                              className="flex items-center bg-white rounded-lg p-3 shadow-sm"
                            >
                              <div className="text-2xl mr-3">
                                {speaker.avatar}
                              </div>
                              <div>
                                <div className="font-medium text-gray-900">
                                  {speaker.name}
                                </div>
                                <div className="text-sm text-gray-600">
                                  {speaker.title}
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    {/* 活动详情 */}
                    <div className="bg-white rounded-xl p-6 shadow-sm">
                      <div className="space-y-4 mb-6">
                        <div className="flex items-center">
                          <Calendar className="w-5 h-5 text-gray-400 mr-3" />
                          <div>
                            <div className="font-medium text-gray-900">
                              {event.date}
                            </div>
                            <div className="text-sm text-gray-600">
                              {event.time}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center">
                          <MapPin className="w-5 h-5 text-gray-400 mr-3" />
                          <div>
                            <div className="font-medium text-gray-900">
                              {event.location}
                            </div>
                            <div className="text-sm text-gray-600">
                              {event.format === 'online'
                                ? '在线参与'
                                : event.format === 'offline'
                                  ? '现场参与'
                                  : '线上线下同步'}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center">
                          <Users className="w-5 h-5 text-gray-400 mr-3" />
                          <div>
                            <div className="font-medium text-gray-900">
                              {event.attendees} 人参与
                            </div>
                            <div className="text-sm text-gray-600">
                              {event.status === 'open'
                                ? '报名开放中'
                                : event.status === 'full'
                                  ? '报名已满'
                                  : '报名已截止'}
                            </div>
                          </div>
                        </div>
                      </div>

                      <Button
                        className="w-full bg-green-600 hover:bg-green-700"
                        disabled={event.status !== 'open'}
                      >
                        {event.status === 'open'
                          ? '立即报名'
                          : event.status === 'full'
                            ? '报名已满'
                            : '报名已截止'}
                        {event.status === 'open' && (
                          <ArrowRight className="w-4 h-4 ml-2" />
                        )}
                      </Button>

                      {event.format !== 'offline' && (
                        <Button variant="outline" className="w-full mt-2">
                          <Video className="w-4 h-4 mr-2" />
                          添加到日历
                        </Button>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 在线培训课程 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              在线培训课程
            </h2>
            <p className="text-lg text-gray-600">
              系统化学习CActor框架，从入门到精通，打造专业技能。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {trainingCourses.map(course => (
              <Card
                key={course.id}
                className={`hover:shadow-lg transition-all duration-300 ${
                  course.featured ? 'ring-2 ring-green-200' : ''
                }`}
              >
                <CardHeader>
                  <div className="flex items-center justify-between mb-2">
                    <Badge
                      className={`${
                        course.level === 'beginner'
                          ? 'bg-green-100 text-green-700'
                          : course.level === 'intermediate'
                            ? 'bg-blue-100 text-blue-700'
                            : 'bg-purple-100 text-purple-700'
                      }`}
                    >
                      {course.level === 'beginner'
                        ? '初级'
                        : course.level === 'intermediate'
                          ? '中级'
                          : '高级'}
                    </Badge>
                    {course.featured && (
                      <Badge className="bg-orange-100 text-orange-700">
                        <Star className="w-3 h-3 mr-1" />
                        热门
                      </Badge>
                    )}
                  </div>
                  <CardTitle className="text-xl">{course.title}</CardTitle>
                  <CardDescription>{course.description}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* 课程统计 */}
                  <div className="grid grid-cols-2 gap-4">
                    <div className="text-center p-3 bg-gray-50 rounded-lg">
                      <Clock className="w-5 h-5 text-gray-600 mx-auto mb-1" />
                      <div className="font-semibold text-gray-900">
                        {course.duration}
                      </div>
                      <div className="text-xs text-gray-600">课程时长</div>
                    </div>
                    <div className="text-center p-3 bg-gray-50 rounded-lg">
                      <BookOpen className="w-5 h-5 text-gray-600 mx-auto mb-1" />
                      <div className="font-semibold text-gray-900">
                        {course.modules}
                      </div>
                      <div className="text-xs text-gray-600">课程模块</div>
                    </div>
                  </div>

                  {/* 评分和学员 */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="flex">
                        {Array.from({ length: 5 }, (_, i) => (
                          <Star
                            key={i}
                            className={`w-4 h-4 ${
                              i < Math.floor(course.rating)
                                ? 'text-yellow-400 fill-current'
                                : 'text-gray-300'
                            }`}
                          />
                        ))}
                      </div>
                      <span className="ml-2 text-sm text-gray-600">
                        {course.rating}
                      </span>
                    </div>
                    <div className="text-sm text-gray-600">
                      {course.students} 学员
                    </div>
                  </div>

                  {/* 讲师信息 */}
                  <div className="flex items-center p-3 bg-gray-50 rounded-lg">
                    <div className="text-2xl mr-3">
                      {course.instructor.avatar}
                    </div>
                    <div>
                      <div className="font-medium text-gray-900">
                        {course.instructor.name}
                      </div>
                      <div className="text-sm text-gray-600">
                        {course.instructor.title} ·{' '}
                        {course.instructor.experience}经验
                      </div>
                    </div>
                  </div>

                  {/* 课程特色 */}
                  <div className="space-y-2">
                    <div className="flex items-center text-sm">
                      <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                      <span className="text-gray-600">实战项目练习</span>
                    </div>
                    <div className="flex items-center text-sm">
                      <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                      <span className="text-gray-600">专家在线答疑</span>
                    </div>
                    {course.certificate && (
                      <div className="flex items-center text-sm">
                        <Award className="w-4 h-4 text-green-500 mr-2" />
                        <span className="text-gray-600">完成可获得证书</span>
                      </div>
                    )}
                  </div>

                  {/* 价格和报名 */}
                  <div className="pt-4 border-t">
                    <div className="flex items-center justify-between mb-4">
                      <div className="text-2xl font-bold text-green-600">
                        {course.price === 'free' ? '免费' : course.price}
                      </div>
                      {course.price !== 'free' && (
                        <div className="text-sm text-gray-500 line-through">
                          原价 ¥{parseInt(course.price.replace('¥', '')) * 1.5}
                        </div>
                      )}
                    </div>
                    <Button className="w-full bg-green-600 hover:bg-green-700">
                      立即报名
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 认证体系 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              专业认证体系
            </h2>
            <p className="text-lg text-gray-600">
              获得官方认证，证明您的专业技能，提升职业竞争力。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {certifications.map((cert, index) => (
              <Card
                key={cert.id}
                className={`hover:shadow-lg transition-all duration-300 relative ${
                  index === 1 ? 'ring-2 ring-blue-200 scale-105' : ''
                }`}
              >
                {index === 1 && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <Badge className="bg-blue-600 text-white px-4 py-1">
                      <Star className="w-3 h-3 mr-1" />
                      推荐
                    </Badge>
                  </div>
                )}
                <CardHeader className="text-center">
                  <div
                    className={`w-20 h-20 rounded-full mx-auto mb-4 flex items-center justify-center ${
                      cert.level === 'Associate'
                        ? 'bg-green-100'
                        : cert.level === 'Professional'
                          ? 'bg-blue-100'
                          : 'bg-purple-100'
                    }`}
                  >
                    <GraduationCap
                      className={`w-10 h-10 ${
                        cert.level === 'Associate'
                          ? 'text-green-600'
                          : cert.level === 'Professional'
                            ? 'text-blue-600'
                            : 'text-purple-600'
                      }`}
                    />
                  </div>
                  <CardTitle className="text-xl">{cert.name}</CardTitle>
                  <Badge
                    className={`${
                      cert.level === 'Associate'
                        ? 'bg-green-100 text-green-700'
                        : cert.level === 'Professional'
                          ? 'bg-blue-100 text-blue-700'
                          : 'bg-purple-100 text-purple-700'
                    }`}
                  >
                    {cert.level}
                  </Badge>
                  <CardDescription className="mt-2">
                    {cert.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* 认证要求 */}
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-3">
                      认证要求：
                    </h4>
                    <div className="space-y-2">
                      {cert.requirements.map((req, reqIndex) => (
                        <div
                          key={reqIndex}
                          className="flex items-start text-sm"
                        >
                          <Target className="w-3 h-3 text-gray-400 mr-2 mt-0.5" />
                          <span className="text-gray-600">{req}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* 认证收益 */}
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-3">
                      认证收益：
                    </h4>
                    <div className="space-y-2">
                      {cert.benefits.map((benefit, benefitIndex) => (
                        <div
                          key={benefitIndex}
                          className="flex items-start text-sm"
                        >
                          <CheckCircle className="w-3 h-3 text-green-500 mr-2 mt-0.5" />
                          <span className="text-gray-600">{benefit}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* 统计信息 */}
                  <div className="bg-gray-50 rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm text-gray-600">已获得认证</span>
                      <span className="font-semibold text-gray-900">
                        {cert.holders} 人
                      </span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">有效期</span>
                      <span className="font-semibold text-gray-900">
                        {cert.duration}
                      </span>
                    </div>
                  </div>

                  {/* 价格和申请 */}
                  <div className="pt-4 border-t">
                    <div className="text-center mb-4">
                      <div
                        className={`text-2xl font-bold ${
                          cert.level === 'Associate'
                            ? 'text-green-600'
                            : cert.level === 'Professional'
                              ? 'text-blue-600'
                              : 'text-purple-600'
                        }`}
                      >
                        {cert.price}
                      </div>
                    </div>
                    <Button
                      className={`w-full ${
                        cert.level === 'Associate'
                          ? 'bg-green-600 hover:bg-green-700'
                          : cert.level === 'Professional'
                            ? 'bg-blue-600 hover:bg-blue-700'
                            : 'bg-purple-600 hover:bg-purple-700'
                      }`}
                    >
                      申请认证
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 历史活动 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              历史活动回顾
            </h2>
            <p className="text-lg text-gray-600">
              错过了精彩活动？观看录播视频，下载学习资料。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {pastEvents.map(event => (
              <Card
                key={event.id}
                className="hover:shadow-md transition-shadow"
              >
                <CardContent className="p-6">
                  <h3 className="font-semibold text-gray-900 mb-2">
                    {event.title}
                  </h3>
                  <div className="text-sm text-gray-600 mb-4">{event.date}</div>

                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center">
                      <Users className="w-4 h-4 text-gray-400 mr-1" />
                      <span className="text-sm text-gray-600">
                        {event.attendees} 人参与
                      </span>
                    </div>
                    <div className="flex items-center">
                      <div className="flex">
                        {Array.from({ length: 5 }, (_, i) => (
                          <Star
                            key={i}
                            className={`w-3 h-3 ${
                              i < Math.floor(event.rating)
                                ? 'text-yellow-400 fill-current'
                                : 'text-gray-300'
                            }`}
                          />
                        ))}
                      </div>
                      <span className="ml-1 text-sm text-gray-600">
                        {event.rating}
                      </span>
                    </div>
                  </div>

                  <div className="flex gap-2">
                    {event.recording && (
                      <Button size="sm" variant="outline" className="flex-1">
                        <Play className="w-3 h-3 mr-1" />
                        观看录播
                      </Button>
                    )}
                    {event.materials && (
                      <Button size="sm" variant="outline" className="flex-1">
                        <Download className="w-3 h-3 mr-1" />
                        下载资料
                      </Button>
                    )}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-gradient-to-r from-green-600 to-emerald-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            开始您的学习之旅
          </h2>
          <p className="text-xl mb-8 opacity-90">
            无论您是初学者还是专家，我们都有适合您的学习路径。
            立即开始，成为CActor框架专家！
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              variant="secondary"
              className="bg-white text-green-600 hover:bg-gray-100"
            >
              <BookOpen className="w-5 h-5 mr-2" />
              浏览课程
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-green-600"
            >
              <Calendar className="w-5 h-5 mr-2" />
              查看活动
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
